<template>
	<view class="">
		<view class="task-container">
			<!-- 任务卡片 -->
			<view class="task-card" v-for="(card, index) in taskCards" :key="index">
				<view class="card-header" @click="handleCardClick(card.type)">
					<text class="title">{{ card.title }}</text>
					<view class="status-stats">
						<text v-for="(status, sIndex) in card.statusList" :key="sIndex" :style="{ backgroundColor: status.color }" class="status-badge">
							{{ getStatusCount(card.type, status.value) }}{{ status.label }}
						</text>
					</view>
				</view>

				<view class="card-content">
					<view class="status-description" v-if="card.type === currentPopupType">
						<scroll-view class="" scroll-y>
							<view class="list-item" v-for="(item, index) in currentList" :key="index"  >
								<view class="item" v-if="card.type === 'order'" @click="handleItemClick(item)"  >
									<view class="">
										<text class="item-id">订单号#{{ item.id }}</text>
										<view class="item-info">
											<image class="nicPic" :src="item.user.nicPic" mode=""></image>
											<text class="user">{{ item.user.nicName }}</text>
											<text class="time">{{ item.time }}</text>
										</view>
									</view>
									<view class="item-status" :style="{ background: item.statusColor }">
										<text class="">
											{{ item.statusText }}
										</text>
									</view>
								</view>

								<view class="item" v-if="card.type === 'business'" @click="handleItemClick(item)" >
									<view class="">
										<text class="item-id">订单号#{{ item.id }}</text>
										<view class="item-info">
											<image class="nicPic" :src="item.user.nicPic" mode=""></image>
											<text class="user">{{ item.user.nicName }}</text>
											<text class="time">{{ item.time }}</text>
										</view>
									</view>
									<view class="item-status" :style="{ background: item.statusColor }">
										<text class="">
											{{ item.statusText }}
										</text>
									</view>
								</view>
								<view class="item" v-if="card.type === 'delivery'" @click="handleItemClick(item)" >
									<view class="item">
										<text class="item-id">订单号#{{ item.id }}</text>
										<view class="item-info">
											<image class="nicPic" :src="item.user.nicPic" mode=""></image>
											<text class="user">{{ item.user.nicName }}</text>
											<text class="time">{{ item.time }}</text>
										</view>
									</view>
									<view class="item-status" :style="{ background: item.statusColor }">
										<text class="">
											{{ item.statusText }}
										</text>
									</view>
								</view>
								<view class="item" v-if="card.type === 'sales'" @click="handleItemClick(item)" >
									<view class="">
										<text class="item-id">订单号#{{ item.id }}</text>
										<view class="item-info">
											<image class="nicPic" :src="item.user.nicPic" mode=""></image>
											<text class="user">{{ item.user.nicName }}</text>
											<text class="time">{{ item.time }}</text>
										</view>
									</view>
									<view class="item-status" :style="{ background: item.statusColor }">
										<text class="">
											{{ item.statusText }}
										</text>
									</view>
								</view>
								<view class="item" v-if="card.type === 'member'" @click="handleItemClick(item)" >
									<view class="">
										<text class="item-id">订单号#{{ item.id }}</text>
										<view class="item-info">
											<image class="nicPic" :src="item.user.nicPic" mode=""></image>
											<text class="user">{{ item.user.nicName }}</text>
											<text class="time">{{ item.time }}</text>
										</view>
									</view>
									<view class="item-status" :style="{ background: item.statusColor }">
										<text class="">
											{{ item.statusText }}
										</text>
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup v-if="currentItem" ref="popupRef" class="uni-popup-top" :is-mask-click="false">
			<view class="popup-wrapper">
				<view class="popup-header">
					<text class="title">任务详情</text>
					<uni-icons type="close" @click="closePopup" size="24" color="#999"></uni-icons>
				</view>
				<scroll-view scroll-y class="popup-content">
					<view class="info-group">
						<view class="info-item">
							<text class="label">订单号：{{currentItem.id}}</text>
						
						</view>
						<view class="info-item">
							<image class="avatar" :src="currentItem.user.nicPic" mode="aspectFill" />
							<text class="nickname">{{ currentItem.user.nicName }}</text>
						</view>
						<view class="info-item">
							<text class="label">申请时间：</text>
							<text class="value">{{ currentItem.time }}</text>
						</view>
					</view>
		
					<view class="action-buttons">
						<button
							v-for="(status, index) in getStatusSequence(currentItem.type)"
							:key="index"
							:style="{
								background: status.color,
								opacity: currentItem.status >= status.value ? 0.5 : 1
							}"
							@click="changeStatus(status.value)"
							:disabled="currentItem.status < status.value"
							class="status-btn"
						>
							{{ status.label }}
						</button>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
	<!-- 最外层 -->
</template>
<script>
	const db=uniCloud.databaseForJQL()
	const app=getApp().globalData
export default {
	data() {
		return {
			currentPopupType: '',
			currentItem:{"id":'',"user":{"nicPic":"","nicName":""},"time":"","status":'',"statusText":"","statusColor":"","type":""},
			stateMeta: {
				order: {
					statusMap: {'待支付':'#FFA726','配送中':'#4D96FF', '已完成':'#6BCB77' },
				
				},
				business: {
				statusMap: {'待审核':'#FFA726','已审核':'#6BCB77' },
				},
				delivery: {
					statusMap: {'待付款':'#FFA726','待发货':'#4D96FF', '已完成':'#6BCB77' },
				},
				sales: {
						statusMap: {'待付款':'#FFA726','待发货':'#4D96FF', '已完成':'#6BCB77' },
				},
				member: {
					statusMap: {'待付款':'#FFA726','待发货':'#4D96FF', '已完成':'#6BCB77' },
				}
			},
			taskCards: [
				{
					type: 'order',
					title: '订单处理',
					badgeColor: '#FF6B6B',
					statusList: [
						{ label: '待付款', color: '#FFA726', value: 0 },
						{ label: '待发货', color: '#4D96FF', value: 1 },
						{ label: '已完成', color: '#6BCB77', value: 2 }
					]
				},
				{
					type: 'business',
					title: '商圈审核',
					badgeColor: '#FF6B6B',
					statusList: [
						{ label: '待审核', color: '#FFA726', value: 0 },
						{ label: '审核中', color: '#4D96FF', value: 1 },
						{ label: '已完成', color: '#6BCB77', value: 2 }
					]
				},
				{
					type: 'delivery',
					title: '送货服务',
					badgeColor: '#FF6B6B',
					statusList: [
						{ label: '已接单', color: '#FFA726', value: 0 },
						{ label: '送货中', color: '#4D96FF', value: 1 },
						{ label: '已完成', color: '#6BCB77', value: 2 }
					]
				},
				{
					type: 'sales',
					title: '代销审核',
					badgeColor: '#FF6B6B',
					statusList: [
						{ label: '待审核', color: '#FFA726', value: 0 },
						{ label: '审核中', color: '#4D96FF', value: 1 },
						{ label: '已审核', color: '#6BCB77', value: 2 }
					]
				},
				{
					type: 'member',
					title: '会员审核',
					badgeColor: '#FF6B6B',
					statusList: [
						{ label: '待审核', color: '#FFA726', value: 0 },
						{ label: '不通过', color: '#4D96FF', value: 1 },
						{ label: '已加入', color: '#6BCB77', value: 2 }
					]
				}
			],
			// 示例数据
			orderList: [],
			businessList: [{ id: 1001, user: { nicPic: '/static/nicPic/m3.png', nicName: '陈辉' }, time: '2025-04-02 14:30', status: 2 }],
			deliveryList: [{ id: 1001, user: { nicPic: '/static/nicPic/m3.png', nicName: '陈辉' }, time: '2025-04-02 14:30', status: 2 }],
			salesList: [{ id: 1001, user: { nicPic: '/static/nicPic/m3.png', nicName: '陈辉' }, time: '2025-04-02 14:30', status: 2 }],
			memberList: [{ id: 1001, user: { nicPic: '/static/nicPic/m3.png', nicName: '陈辉' }, time: '2025-04-02 14:30', status: 2 }]
		};
	},

	computed: {
		currentList() {
			const listMap = {
				order: this.orderList,
				business: this.businessList,
				delivery: this.deliveryList,
				sales: this.salesList,
				member: this.memberList
			};
			return this.processData(listMap[this.currentPopupType], this.currentPopupType);
		}
	},
    onLoad(res) {
    	this.groupId=res.groupId
		this.getOrder(res.groupId)
    },
	methods: {
		async getOrder(id){
		try{const res=await	db.collection('order').where({
				groupId:id
			}).getTemp()
			console.log(res);
		const result =await db.collection(res,'linli-user').get()
			console.log('订单用户',result)
			const orderTask={ id:'', user:{ nicPic: '', nicName: '' },time:'', status: 0}
			
			if(result.data.length>0){
				  
			  for (const order of result.data){
				 orderTask.id= order._id
				 orderTask.user.nicPic=order.user_id[0].nicPic
				 orderTask.user.nicName=order.user_id[0].nicName
				 orderTask.time=order.order_time
				 orderTask.status=order.order_status
				 this.orderList.push(orderTask)
			  }
	         console.log("==",this.orderList);
				
			}else{
				this.orderList=[]
			}}catch(e){
			console.log("任务读取失败",e);
		}
		
			
			
		},
		
		
		processData(list, type) {
			console.log("订单列表",list);
			if (!list || !this.stateMeta[type]) return [];
			return list.map((item) => ({
				...item,
				statusText: item.status,
				statusColor: this.stateMeta[type].statusMap[item.status]
			}));
		},

		getStatusCount(type, statusValue) {
			const listMap = {
				order: this.orderList,
				business: this.businessList,
				delivery: this.deliveryList,
				sales: this.salesList,
				member: this.memberList
			};
			return listMap[type]?.filter((item) => item.status === statusValue).length || 0;
		},
		getProgressWidth(item) {},
		getPendingCount(type) {
			const listMap = {
				order: this.orderList,
				business: this.businessList,
				delivery: this.deliveryList,
				sales: this.salesList,
				member: this.memberList
			};
			const list = listMap[type];
			return list ? list.length : 0;
		},
		handleCardClick(type) {
			this.currentPopupType = type;
		},
		async handleItemClick(item) {
		
			this.currentItem = { ...item, type: this.currentPopupType };
			console.log("current内容",JSON.stringify(this.currentItem))
			await this.$nextTick();
			this.$refs.popupRef.open();
			console.log("item: " + JSON.stringify(item));
		},

		// 获取当前类型的状态序列
		getStatusSequence(type) {
		    const card = this.taskCards.find((card) => card.type === type);
		    if (card) {
		        return card.statusList.map((status) => ({
		            label: status.label,
		            color: status.color,
		            value: status.value
		        }));
		    }
		    return [];
		},

		// 修改状态
		changeStatus(targetStatus) {
			const targetList = this[`${this.currentItem.type}List`];
			const index = targetList.findIndex((item) => item.id === this.currentItem.id);
			targetList[index].status = targetStatus;
			this.$refs.popupRef.close();
		},
		closePopup() {
			this.$refs.popupRef.close();
		}
	}
};
</script>

<style lang="scss" scoped>
.task-container {
	padding: 20rpx;

	.task-card {
		background: #f3f3f3;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
		transition: transform 0.3s;

		&:active {
			transform: scale(0.98);
		}

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			border-bottom: 2rpx solid #eee;

			.title {
				font-size: 32rpx;
				font-weight: 600;
			}

			.status-stats {
				display: flex;
				gap: 10rpx;

				.status-badge {
					color: white;
					padding: 4rpx 12rpx;
					border-radius: 32rpx;
					font-size: 22rpx;
					min-width: 40rpx;
					text-align: center;
					box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
				}
			}
		}

		.card-content {
			padding: 15rpx;

			.progress-bar {
				height: 16rpx;
				background: #eee;
				border-radius: 8rpx;
				margin: 20rpx 0;
				display: flex;
				overflow: hidden;

				.progress-segment {
					transition: width 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
					&:not(:last-child) {
						border-right: 2rpx solid white;
					}
				}
			}
			.item {
				display: flex;
				background-color: white;
				border-radius: 25rpx;
				margin: 10rpx;
				justify-content: space-around;
			}
			.item-id {
				font-size: 25rpx;
				color: #97d6ff;
			}
			.time {
				font-size: 26rpx;
				color: #ccc;
			}
			.nicPic {
				width: 50rpx;
				height: 50rpx;
				padding-right: 15rpx;
				border-radius: 10rpx;
			}
			.user {
				font-size: 26rpx;
				padding: 25rpx;
			}
			.item-status {
				color: white;
				padding: 4rpx 12rpx;
				border-radius: 32rpx;
				font-size: 22rpx;
				height: 38rpx;
				align-self: center;
				width: 110rpx;
				text-align: center;
				box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			}
			.status-description {
				.status-item {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;

					.dot {
						width: 16rpx;
						height: 16rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}

					.status-text {
						font-size: 26rpx;
						color: #666;
					}
				}
			}
		}
	}
}
/* 弹窗容器 */
.popup-wrapper {
	width: 650rpx;
	background: white;
	border-radius: 24rpx;
	max-height: 80vh;

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 32rpx;
		border-bottom: 1rpx solid #eee;

		.title {
			font-size: 36rpx;
			font-weight: 600;
		}
	}

	.popup-content {
		padding: 0 32rpx 32rpx;

		.info-group {
			.info-item {
				display: flex;
				align-items: center;
				margin: 24rpx 0;

				.label {
					color: #666;
					width: 140rpx;
				}
				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}
			}
		}

		.action-buttons {
			display: flex;
			gap: 20rpx;
			margin-top: 48rpx;

			.status-btn {
				flex: 1;
				color: white;
				border-radius: 999rpx;
				font-size: 28rpx;
				padding: 16rpx 0;
				transition: opacity 0.3s;

				&[disabled] {
					opacity: 0.5 !important;
				}
			}
		}
	}
}
</style>
